<# Be aware that we need these extra new lines here or marked will not realise that the <div>
   is HTML and wrap each line in a <p> - thus breaking the HTML #>

{% assign lvl = page.url | append:'X' | split:'/' | size %}
{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}

<div>
  <a ng-click="openPlunkr('{{ relative }}<$ doc.example.outputFolder $>')" class="btn pull-right">
    <i class="glyphicon glyphicon-edit">&nbsp;</i>
    Edit in Plunker</a>
  <div class="runnable-example" path="<$ doc.example.outputFolder $>"
      <@ for attrName, attrValue in doc.example.attributes @>
        <$ attrName $>="<$ attrValue $>"
      <@ endfor @>
  >

   <@ for fileName, file in doc.example.files @>
    <div ng-non-bindable class="runnable-example-file"
      <@ for attrName, attrValue in file.attributes @>
        <$ attrName $>="<$ attrValue $>"
      <@ endfor @>
    >
      <@ code -@>
        {% raw %}<$ file.fileContents $>{% endraw %}
      <@- endcode @>
    </div>
  <@ endfor @>

    <iframe class="runnable-example-frame" src="{{ relative }}<$ doc.example.outputFolder $>/index.html" name="<$ doc.example.id $>"></iframe>
  </div>
</div>

<# Be aware that we need these extra new lines here or marked will not realise that the <div>
   above is HTML and wrap each line in a <p> - thus breaking the HTML #>
